<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <!--<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>-->
    <!--<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>-->
    <!--[endif]-->
    <script type="text/javascript" src="../../common/js/public.js"></script>
    <script type="text/javascript" src="../../common/js/publicUtils.js"></script>
    <style>
        .error{
            color: red;
            line-height: 20px;
        }
        .search .layui-table{
            margin-top: 0px !important;
        }
        .datacash.layui-table,.datacash .layui-table-view {
            margin-top: 30px !important;
        }
    </style>
</head>
<body>
<div class="layui-fluid" id="flowDiv">
    <div class="zTreeBackground left" style="float: left;width:80%">
        <div class="layui-form-item" style="width:99%;margin-bottom:-10px;text-align:right;">
            <div class="layui-inline">
                <label class="layui-form-label">职责内容</label>
                <div class="layui-input-block">
                    <input type="text" id="name1" lay-verify="required|phone" autocomplete="off" class="layui-input" placeholder="请输入职责内容"/>
                    <i class="layui-icon layui-icon-search" style="position: absolute;top:8px;right: 8px;" onclick="easysearch()"></i>
                </div>
            </div>
            <button type="button" style="margin-left:12px;margin-top: -12px;" class="layui-btn layui-btn-normal" onclick="moresearch()"><i class="layui-icon layui-icon-search"></i>高级搜索</button>
        </div>
        <div class="search_float_div" style="position:absolute;z-index:999;width:79%;background-color: #f1f1f1;padding-top: 20px;text-align:left;display:none">
            <div class="layui-form-item layui-form">
                <div class="layui-inline" style="width:400px;">
                    <label class="layui-form-label">适用岗位</label>
                    <div class="layui-input-inline">
                        <select name="job" id="job"></select>
                    </div>
                </div>
                <div class="layui-inline" style="width:400px;">
                    <label class="layui-form-label">职责内容</label>
                    <div class="layui-input-inline">
                        <input type="text" id="name" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" style="float: left;margin-left: 12px" class="layui-btn layui-btn-normal" onclick="searchTable()"><i class="layui-icon layui-icon-search"></i>查询</button>
                    <button type="button" style="float: left;margin-left: 12px" class="layui-btn layui-btn-normal" onclick="resetSearchTable()"><i class="layui-icon layui-icon-search"></i>重置</button>
                    <button type="button" class="layui-btn layui-btn-primary" onclick="canclesearch()">取消</button>
                </div>
            </div>
        </div>
        <table class="layui-hide" id="datatable" lay-filter="datatable"></table>
        <script type="text/html" id="toolbar">
        </script>
    </div>

    <div class="zTreeBackground right" style="float: left; padding-left:1%;width:18%">
        <div class="titlediv">
            <p style="text-align:right;background-color:white;line-height: 30px">
                菜单管理<i class="layui-icon layui-icon-refresh" style="margin-left: 36%" onclick="searchByName()"></i>&ensp;&ensp;
            </p>

        </div>
        <div class="searchdiv" >
            <div class="layui-input-inline" style="width:100%">
                <input type="text" id="search" name="keyword" autocomplete="off" class="layui-input" placeholder="请输入名称"/>
                <i class="layui-icon layui-icon-search" style="position: absolute;top:8px;right: 8px;" onclick="searchByName()"></i>
            </div>
        </div>
        <div class="ztreediv" id="ztreediv" style="overflow:auto">
            <div class="ztreeuldiv">
                <ul id="treeStructure" class="ztree"></ul>
            </div>
        </div>
    </div>
</div>
<script>
    var nodes,tableObj,zTreeObj,datas=[],menuid=[],orgTypeMap,form,table,jsondata;//1为保存2为更新
    $(function () {
        orgTypeMap = getDic("OrgJob");
        loadType();
        loadInputTree();
        loadTable();
        loadbutton("toolbar");//加载按钮loadbutton(id)，id为button容器id，不传默认为buttongroup
    })
    window.onload = getContentSize;
    window.onresize = getContentSize;

    /**
     * 页面自适应
     */
    function getContentSize() {
        var wh = document.documentElement.clientHeight;
        var eh = 30;
        ch = (wh - eh) + "px";
        document.getElementById( "flowDiv" ).style.height = ch;
        document.getElementById( "ztreediv" ).style.height = (wh - eh - 50)+"px";
        document.body.style.height = (wh)+"px";
    }

    function loadType(){
        layui.use(['form','element'], function() {
            form = layui.form;
            var layer=layui.layer;;
            var option="<option value=''>全部</option>";
            for(var key of orgTypeMap){
                option += "<option value='"+key[0]+"'>"+key[1]+"</option>";
            }
            $("#job").html(option);
            form.render();
        })

    }
    /**
     * setting格式1
     * @type
     */
    var setting = {
            check: {
                enable: true,
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey:"id",
                    pIdKey:"pid",
                    isParent:"parent",
                    rootPid:-1
                },
                key: {
                    isParent:"parent",
                    url: "xUrl",
                    icon:"xIcon"
                }
            },
            callback: {
                onClick: zTreeInputOnClick
            }
        };

    /**
     * 点击触发
     * @param event
     * @param treeId
     * @param treeNode
     */
    function zTreeInputOnClick(event, treeId, treeNode) {
        $(".pname").val(treeNode.name);
        $(".pid").val(treeNode.id);
        $(".parentmenu").css("display","none");
        $(validform(1).form());
    };

    /**
     * 加载右侧树
     */
    function loadInputTree(){
        publicAjax (null,"sysmenu/selectPermissionsFromRole",{},null,null,function(r){
            jsondata = r.data;
            var json = {"id":-1,"name":"菜单管理", open:true};
            jsondata.push(json);
            zTreeObj = $.fn.zTree.init($("#treeStructure"),setting , jsondata);
            //getAppointNode(zTreeObj_input,$(".menudiv pid").val());
        })

    }

    /* *
     * @Author bxf
     * @Description 高级搜索
     * @Date 17:34 2019/8/30
     * @param null
     * @return
     */
    function moresearch(){
        $(".search_float_div").slideToggle();
    }
    /* *
     * @Author bxf
     * @Description 简单查询
     * @Date 17:46 2019/8/30
     * @param null
     * @return
     */
    function easysearch(){
        var myname = $("#name1").val();
        var myjob = '';
        loadTable(myname,myjob);
    }
    /* *
     * @Author bxf
     * @Description 取消查询
     * @Date 17:44 2019/8/30
     * @param null
     * @return
     */
    function canclesearch(){
        $(".search_float_div").slideToggle();//关闭搜素div
    }
    /* *
     * @Author bxf
     * @Description 重置查询
     * @Date 10:45 2019/10/29
     * @param null
     * @return
     */
    function resetSearchTable(){
        $("#job").val("");
        $("#name").val("");
        searchTable();
    }
    /* *
     * @Author bxf
     * @Description 搜索table数据
     * @Date 17:51 2019/8/30
     * @param null
     * @return
     */
    function searchTable(){
        var myname = $("#name").val();
        var myjob = $("#job").val();
        loadTable(myname,myjob);
        $(".search_float_div").slideToggle();//关闭搜素div
    }

    /* *
     * @Author bxf
     * @Description 加载左侧table
     * @Date 17:46 2019/7/23
     * @param null
     * @return
     */
    function loadTable(myname,myjob){

        var tableurl = publicUrl+'orgrole/selectJobListByCondition';
        layui.use(['form','table'], function(){
            form = layui.form;
            table = layui.table;
            tableObj = table.render({
                elem: '#datatable',
                size: 'sm',
                even: true, //开启隔行背景
                toolbar: '#toolbar',
                height: 'full-80',
                headers: {"Authorization":getData("Authorization")},
                method: 'post',
                url: tableurl, //stationId='+window.parent.window.parentId,//8AE7DECA-8E41-4FAB-8B30-9FD1B0B7FA33,78A9E5D8-20FB-4436-BBE8-A25EAC38D056
                where:{
                    "job":myjob,
                    "name":myname
                },
                parseData: function(res){ //res 即为原始返回的数据
                    return formatTableParseData(res);
                },
                request: {
                    pageName: 'pageIndex' //页码的参数名称，默认：page
                    ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
                },
                response: {
                    statusCode: 2000,
                },
                cols: [[
                    {
                        type:'radio',
                        width: 80,
                    },
                    {
                        type: 'numbers',
                        title: '序号',
                        width: 80,
                        align: 'center',
                    }, {
                        field: 'code',
                        title: '职责编码',
                        width: '15%',
                        sort: true,
                        align: 'center',
                    },{
                        field: 'name',
                        title: '职责内容',
                        width: '40%',
                        align: 'center',
                    }, {
                        field: 'job',
                        title: '适用岗位',
                        width: '15%',
                        align: 'center',
                        templet: function(d) {
                            return orgTypeMap.get(d.job+"");
                        }

                    }]],
                page: true
            });
            //勾选展示菜单
            table.on('radio(datatable)', function(obj){
                nodes = obj.data;
                publicAjax (null,'sysmenu/selectAllMenuByJob',{'jobids':obj.data.id},null,null,function(r){
                    if(r.code==2000){
                        var list = r.data;
                        zTreeObj = $.fn.zTree.init($("#treeStructure"),setting , jsondata);
                        $.each(list,function(i,e){
                            getAppointNode(zTreeObj,e.id);
                        })
                    }
                })
            });

        });
    }

    /**
     * 打开选中指定节点
     * @param treeobj
     * @param id
     */
    function getAppointNode(treeobj,id){
        if(id){
            var node = treeobj.getNodeByParam("id",id);
            treeobj.checkNode(node, true, false);//指定选中ID的节点，不级联操作！
            treeobj.expandNode(node, true, false);//指定选中ID节点展开
        }
    }

    /**
     * 绑定岗位按钮功能
     * @returns {*}
     */
    function bindjobandmenu(){
        var node = zTreeObj.getCheckedNodes(true);
        if(node.length<1){
            layself("请选择一条信息！")
        }
        $.each(node,function(i,e){
            menuid.push(e.id);
        })
        var data = {"jobid":nodes.id,"menuids":menuid.join(",")}
        var result;
        publicAjax (null,'sysmenu/bindJobAndMenu',data,false,null,function (r) {
            if(r.code==2000){
                laysuccess("添加成功",null);
            }else{
                layerror(r.msg?r.msg:"添加失败",null);
            }
        });
    }


</script>
</body>

</html>
